<template>
  <div class="relative hover:duration-300 shadow-sm item hover:translate-y-[-6px]">
    <div class="flex items-center">
      <div class="desc grow">
        <h3 class="text-2xl">{{ job.title }}</h3>
        <h5 class="my-2 text-base">岗位职责</h5>
        <ul class="text-sm">
          <li v-for="duty in job.duty" :key="duty.id">{{ duty.text }}</li>
        </ul>
      </div>
      <div>
        <div class="text-xl button" @click="onDetail(job)">查看详情</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  job: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['detail']);
const onDetail = (job)=>{
  console.log('detail:',job)
  emit('detail',job)
}
</script>

<style lang="scss" scoped>
.item{
  margin:30px 0;
  padding:15px 40px;
  background-color: #cee2f0;
  border-radius:15px;
  .desc{
    color:#1e445d;
  }
}
.button {
  background-color: #3ea0e4;
  color:#fff;
  border-radius: 25px;
  padding: 8px 25px;
  cursor: pointer;
}
</style>
